<template>
	<div class="pay-box" :style="`height: ${screenHeight}px`">
		<!--<div class="pay-box-scroll" :style="isFocus ? 'height: 130vh' : ''">-->
    <div class="pay-box-scroll" style='display:flex;flex-direction:column;height:100%;'>
			<m-header :hasBack="true" :hasTitle="true" title="订单支付" :goBack="goBack"></m-header>
			<div class="centent payment_con">
				<div class="amount_con aui-margin-b-15">
					<h1>共需要支付</h1>
          			<h2>¥<span id="amountText">{{money}}</span></h2>
					<h3 v-if="walletMoneyState" style="color: red;font-size: 12px;">(钱包已付：￥<span>{{walletMoney}}</span>)</h3>
					 <count-down :orderType="orderType"  :endTime="autoCancelTime" @cancel="cancel"></count-down>
				</div>
				<!--付款方式1-->
				<div class="aui-content aui-margin-b-15">
					<ul class="aui-list aui-list-in">
						<li class="aui-list-header">
							支付方式
						</li>
						<li class="aui-list-item">
							<div class="aui-list-item-label-icon">
								<!-- <i class="icon njfont nj-yizhifu"></i> -->
								<img src="static/image/pay-img.png" style="width: 1.6rem;"/>
							</div>
							<div class="aui-list-item-inner">
								<div class="pay_info_box">
									<span class="pay_info_title">象谱支付</span>
									<span class="pay_info_text">微信/支付宝</span>
								</div>
								<div class="aui-list-item-right">
									<div class="aui-list-item-right">
										<input type="radio" class="aui-radio" :checked="yizhifuChoosed" @click="emitSetPayWay(yizhifu)">
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<!--付款方式1 end-->
				<div class="pay_prompt_box" v-show="walletChoosed">
					<span>钱包支付</span>
					<input v-model="getWalletMoney"
						@focus.stop="walletInputFocusEvent"
						@blur.stop="walletInputBlurEvent"
						class="pay_prompt_input"
						ref="walletMoneyInput"
						type="text"/>
				</div>
				<div class="pay_prompt_box" v-show="yizhifuChoosed">
					<span>象谱支付</span>
					<span class="pay_prompt_span">{{thirdPayMoney}}</span>
				</div>


			</div>
      <!--确定-->
      <div class="settle_accounts lijixiadan">
        <div class="aui-btn aui-btn-danger aui-btn-block aui-btn-sm" id="goPay" @click="pay" >确定</div>
      </div>
      <!--确定 end-->
		</div>
	</div>
</template>

<script>
	import Header from "../../real-containers/header";
	import * as way from "../../config/pay-way"
	import {mapMutations, mapGetters} from "vuex";
	import {Toast} from "../../utils/toast";
	import payForOthers from '../../utils/outUrl'
	import getPOFurl from '../../utils/outUrl/getPayForOthersUrl'
	import countdown from '../pay/countdown.vue'
	export default {
		props: {
			pageType: {
				type: String,
				default: "android"
			},
			money: {
				type: [Number, String],
				default: 0.01
			},
			payClick: {
				type: Function,
				default: () => {}
			},
			// 支付取消按钮置灰操作
			payCancel:{
				type: Function,
				default: () => {}
			},
			goBack: {
				type: Function,
				default: () => {}
			},
			//用钱包支付的金额
			walletMoney: {
				type: [Number, String],
				default: 0
			},
			walletMoneyState: {
				type: Boolean,
				default: false
			},
			walletBalance: {
				type: [Number, String],
				default: "0.00"
			},
			//翌支付需要支付的金额
			thirdPayMoney: {
				type: [Number, String],
				default: "0.00"
			},
			//orderType
			orderType: {
				type: Number,
				default: -1
			},
			autoCancelTime:{
				type: Number,
			},
		},
		data() {
			return {
				walletMoneyData: this.walletMoney,
				//最近的一次正确的值
				lastRightMoney: 0,
				isFocus: false,
				showPfoBtn: false,
				
			}
		},
		computed: {
			...mapGetters("gw", [
				"getPayWay"
			]),
			yizhifu() {
				return way.yizhifu;
			},
			wallet() {
				return way.wallet;
			},
			yizhifuChoosed() {
				// console.log("this.getPayWay", this.getPayWay);
				return this.getPayWay.join(",").indexOf(way.yizhifu) > -1;
			},
			walletChoosed() {
				// console.log("sdsds", this.getPayWay);
				return this.getPayWay.join(",").indexOf(way.wallet) > -1;
			},
			//获取屏幕高度
			screenHeight() {
				return window.environment === "edit" ? "600" : window.innerHeight;
			},
			getWalletMoney: {
				set(val) {
					// console.log(val);
					let reg = /^\d*\.{0,1}\d{0,2}$/;//校验符合数字
					if (val === "") {
						this.walletMoneyData = val;
						this.$emit("changeWalletMoney", "");
					} else if (reg.test(val) && parseFloat(val) <= parseFloat(this.money) && parseFloat(val) <= parseFloat(this.walletBalance)) {
						// console.log("输入的格式合法，开始赋值");
						this.walletMoneyData = val;
						this.$emit("changeWalletMoney", val);
					} else {
						this.$refs.walletMoneyInput.value = this.walletMoneyData;
					}
				},
				get() {
					return this.walletMoneyData;
				}
			},
			// 是否显示代付按钮
			// showPfoBtn() {
			// 	return !this.$route.query.pfo
			// }
		},
		components: {
			"m-header": Header,
			'count-down': countdown,
		},
		methods: {
			...mapMutations("gw", [
				"setPayWay"
			]),
			walletInputFocusEvent() {
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android
				if (!isAndroid) {
					return;
				}
				this.isFocus = true;
			},
			walletInputBlurEvent() {
				this.isFocus = false;
			},
			emitSetPayWay(val) {
				// console.log("sdsdsd", val);
				if (this[val + "Choosed"]) {
					console.log("已经选中了该支付方式，再次点击为取消选中状态");
					// this.setPayWay("-1");
					this.getPayWay.splice(this.getPayWay.indexOf(val), 1);
					this.setPayWay(this.getPayWay);
					return;
				}
				let arr = this.getPayWay;
				arr.push(val)
				this.setPayWay(arr);
			},
			pay() {
				if (this.orderIsClosed) {
					Toast({
						duration: 1000,
						type: "warn",
						message: "订单已关闭"
					});
					return;
				}
				if (this.payWayComputed === "-1") {
					Toast({
						duration: 1000,
						type: "warn",
						message: "请选择支付方式"
					});
					return;
				}
				this.payClick();
			},
			cancel() {
				this.orderIsClosed = true;
				// this.payCancel();
			}
		},
		watch: {
			walletMoney(newVal) {
				this.getWalletMoney = newVal;
			}
		},
		created() {
			console.log("this.orderType", this.orderType);
			// console.log("this.getPayWay", this.getPayWay.join);
		}
	}
</script>

<style scoped>
	.pay-box {
		/* height: 100%; */
		overflow: hidden;
	}
	.settle_accounts {
		position: absolute;
	}
	.aui-list-item-label-icon {
		width: 3rem;
		display: flex;
		justify-content: center;
	}
	.pay_info_box {
		display: flex;
    	flex-flow: column nowrap;
    	align-items: flex-start;
	}
	.pay_info_title {
		color: #000;
		font-weight: bold;
		font-size: 0.7rem;
	}
	.pay_info_balance {
		color: #EF5423;
	}
	.pay_info_text {
		font-size: 12px;
	}
	.pay_prompt_box {
		display: flex;
		justify-content: space-between;
		padding: 0.5rem 0.75rem;
		background: #fff;
		align-items: center;
	}
	.pay_prompt_box:first-of-type {
		border-bottom: 1px solid #ddd;
	}
	.pay_prompt_input, .pay_prompt_span {
		/* text-align: right; */
		color: #000;
		font-size: 0.8rem;
		font-weight: bold;
		width: 4rem;
		border-bottom: 1px solid #ddd;
		/* padding-right: 0.5rem; */
		border-radius: 3px;
		text-align: center;
	}
	.pay_prompt_span {
		border-bottom: unset;
	}
	/* 代付 */
	.settle_accounts-footer {
		height: 5rem;
	}
	#payForOthers {
		margin-top: 0.4rem;
	}
	.amount_con h1 {
		font-size: 0.9rem;
	}
	.amount_con h2 {
		font-size: 1rem;
		font-weight: bold;
	}
</style>
